<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 使用双大括号的方式进行申明式渲染, 文本 -->
      <p>{{ msg }}</p>
      <p>{{ count * 2 }}</p>
      <p>{{ arr }}</p>
      <p>{{ obj }}</p>
      <p>{{ done }}</p>
      <p>{{ nl }}</p>
      <p>{{ uf }}</p>

      <!-- 使用v-bind指令进行那个属性的渲染，属性 -->
      <!-- 变量或者表达式 -->
      <p v-bind:title="msg + '!!!!!'">hello vue!</p>

      <img v-bind:src="url" alt="" />
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 创建一个vue的实例
      const vm = new Vue({
        // option
        el: "#app",
        // 响应式数据
        // 在vue里面所有的操作都是在操作数据（不再使用dom操作）
        // 数据驱动

        // 双大括号会将任意的变量转成字符串格式，除了null和undefined
        data: {
          msg: "hello",
          count: 10,
          arr: [1, 2, 3],
          obj: {
            a: 3,
            b: 4,
          },
          done: true,
          nl: null,
          uf: undefined,
          url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
        },

        // mounted相当于onload
        // mounted() {
        //   setTimeout(() => {
        //     this.msg = "hi";
        //   }, 3000);
        // },
      });
    </script>
  </body>
</html>
